import './index.css';

import {
  useEffect,
  useState,
} from 'react';

import { useHistory } from 'react-router-dom';

import Connect from '../../Components/Connect';

function Header() {
  let history = useHistory();
  const [usShow, setusShow] = useState(false);
  const [isShow, setIsShow] = useState(true);

  const Busidng = () => {
    setusShow(!usShow);
  };

  useEffect(() => {
    const width = document.documentElement.clientWidth;
    const height = document.documentElement.clientHeight;
    if (width < height) {
      setIsShow(false);
    }
  }, []);

  return (
    <div className="header">
      <div className="content">
        <img
          className="logo"
          src={[require("../../assets/img/logo.png")]}
        ></img>

        {isShow ? (
          <ul className="nav">
            <li
              onClick={() => history.push("/home")}
              className={history.location.pathname == "/home" ? "active" : ""}
            >
              Features
            </li>
            <li
              onClick={() => history.push("/about")}
              className={history.location.pathname == "/about" ? "active" : ""}
            >
              About
            </li>
            <li
              onClick={() => history.push("/nfts")}
              className={history.location.pathname == "/nfts" ? "active" : ""}
            >
              NFTs
            </li>
            <li
              onClick={() => history.push("/faqs")}
              className={history.location.pathname == "/faqs" ? "active" : ""}
            >
              FAQs
            </li>
            <Connect></Connect>
          </ul>
        ) : (
          <>
            <div className={usShow ? "mobileBox" : "mobileBox-hidden"}>
              <ul className="mobileNav">
                <li onClick={() => history.push("/home")}>Features</li>
                <li onClick={() => history.push("/about")}>About</li>
                <li onClick={() => history.push("/nfts")}>NFTs</li>
                <li onClick={() => history.push("/faqs")}>FAQs</li>
              </ul>
              <div className="mobileBoxFooter">
                <div className="login">
                  <Connect></Connect>
                </div>
                <p>Socials:</p>
                <div className="link">
                  <a href="#">Instagram</a>
                  <a href="#">Facebook</a>
                  <a href="#">Facebook</a>
                </div>
                <p>© All Rights Reserved 2022. Legal Terms</p>
              </div>
            </div>
            <div
              className={usShow ? "nduise-active" : "nduise"}
              onClick={() => Busidng()}
            ></div>
          </>
        )}
      </div>
    </div>
  );
}

export default Header;
